<template>
	<div id="Home">
		<el-card shadow="always">
			<div class="user-wrapper">
				<el-avatar
					:size="70"
					:src="$store.state.user.avatar"
				></el-avatar>
				<span>欢迎登录，{{ $store.state.user.name }}</span>
			</div>
		</el-card>
		<div class="logout">
			<el-button type="primary" @click="logout" round>退出登录</el-button>
		</div>
	</div>
</template>

<script>
import loginApi from '@/api/login'
export default {
	name: 'Home',
	data() {
		return {}
	},
	methods: {
		logout() {
			this.$store.dispatch('LogOut').then(() => {
				location.reload() // 为了重新实例化vue-router对象 避免bug
			})
		},
	},
	mounted() {},
	components: {},
}
</script>

<style scoped lang="less">
#Home {
	h1 {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		font-size: 150px;
		color: #909399;
		height: 100vh;
	}
	.user-wrapper {
		display: flex;
		height: 100px;
		align-items: center;

		span {
			margin-left: 20px;
			color: #409eff;
		}
	}
	.logout {
		display: flex;
		height: 100px;
		width: 100%;
		justify-content: center;
		align-items: center;
	}
}
</style>
